  <template>
	<view class="container">
		<!-- 数据列表 -->
		<view class="class-order">
			<view class="class-order__head">
				<view class="class-order__head-title">{{ appointment.course.name }}<text>{{ appointment.course.course_category.name }}</text></view>
			</view>
			<view class="class-order__body">
				<view class="class-order__cell">
					<text>难易度：</text>
					<u-rate :current="appointment.course.degree" :disabled="true" inactive-icon="star-fill" inactive-color="#DFDFDF" active-color="#F5C822" size="24" gutter="6"></u-rate>
				</view>
				<view class="class-order__cell">
					<text>教练：</text><text>{{ appointment.arrangement.teacher.name }}</text>
				</view>
				<view class="class-order__cell">
					<text>教室：</text><text>{{ appointment.arrangement.classroom.name }}</text>
				</view>
				<view class="class-order__cell">
					<text>时间：</text><text>{{ appointment.date_text }} {{ appointment.start_time }}-{{ appointment.end_time }}</text>
				</view>
				<view class="class-order__cell">
					<text>扣费：</text><text>{{ appointment.vip_card_num }}次</text>
				</view>
				<view class="class-order__cell">
					<text>会员卡：</text><text>{{ appointment.vip.name }}</text>
				</view>
			</view>
		</view>
		
		<view class="wd-flex wd-buttonbar">
			<view class="wd-flex-cell">
				<u-button v-if="appointment.status==0" :custom-style="wd_button_plain" shape="circle" :ripple="true" :plain="true">已取消</u-button>
				<u-button v-else-if="appointment.sign_status==2" :custom-style="wd_button_plain" shape="circle" :ripple="true" :plain="true">已核销</u-button>
				<u-button v-else-if="appointment.queue_status==1" :custom-style="wd_button_plain" shape="circle" :ripple="true" :plain="true">排队中</u-button>
				<u-button v-else @click="bindVerification()" :custom-style="wd_button_plain" shape="circle" :ripple="true" :plain="true">确认核销</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				scene:'',
				appointment: {
					course:{name:'',degree:0,course_category:{name:''}},
					date_text:'',
					start_time:'',
					end_time:'',
					arrangement:{
						teacher:{name:''},
						classroom:{name:''}
					},
					vip_card_num:1
				}
			}
		},
		onLoad(options) {
			this.scene = options.scene;
			this.fetchDetail();
		},
		methods: {
			fetchDetail() {
				this.$core.post({url:'fitness.course_arrangement/order_confirm',data:{token:this.scene},success:(ret)=>{
					 this.appointment = ret.data;
				}});
			},
			//核销
			bindVerification(){
				var that = this;
				let scene = that.scene;
				uni.showModal({
					title:'提示',
					content:'确认核销？',
					success: function (res) {
						if (res.confirm) {
							that.$core.post({url:'fitness.course_arrangement/verifier_order',data:{token:scene},success:(ret)=>{
								uni.showModal({
									title:'提示',
									content: ret.msg,
									showCancel: false,
									success(res){
										let pages = getCurrentPages();
										if(pages.length>1){
											uni.navigateBack()
										}else{
											uni.switchTab({
												url: "/pages/tabbar/class/class"
											})
										}
									}
								})
								
							},
							fail:(ret)=>{
								uni.showModal({
									title:'提示',
									content: ret.msg,
									showCancel: false,
								})
								return false;
							}
							});
						}
					}
				})
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.class-order {
		margin: 24rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		overflow: hidden;
		&__head {
			display: flex;
			align-items: center;
			padding: 24rpx 30rpx;
			&-title {
				flex: 1;
				overflow: hidden;
				line-height: 48rpx;
				font-size: 34rpx;
				font-weight: 500;
				color: #333333;
				text {
					display: inline-block;
					vertical-align: middle;
					margin-top: -4rpx;
					margin-left: 14rpx;
					padding: 0 14rpx;
					background: linear-gradient(131deg, #A36BFF 0%, #6D4BBE 100%);
					line-height: 32rpx;
					font-size: 22rpx;
					color: #FFFFFF;
					border-radius: 24rpx 0 24rpx 0;
				}
			}
			&-state {
				line-height: 34rpx;
				font-size: 24rpx;
				color: #999999;
			}
		}
		&__body {
			border-top: 1rpx #EDEDED solid;
			padding: 20rpx 30rpx;
		}
		&__cell {
			display: flex;
			justify-content: space-between;
			line-height: 48rpx;
			font-size: 26rpx;
			color: #333333;
		}
		&__foot {
			display: flex;
			justify-content: space-between;
			padding: 15rpx 30rpx;
			background: rgba(109, 75, 190, 0.15);
			line-height: 48rpx;
			font-size: 26rpx;
			color: #6D4BBE;
		}
	}
</style>